import { useEffect, useState } from 'react'
import Hero from './components/Hero'

export default function App() {
  const [darkMode, setDarkMode] = useState(() => {
    const savedTheme = localStorage.getItem('theme')
    if(savedTheme) {
      return savedTheme === 'dark'
    } else {
      // 使用系统默认的主题
      return window.matchMedia('(prefers-color-scheme: dark)').matches
    }
  })

  const toggleDarkMode = () => {
    setDarkMode(!darkMode)
  }

  useEffect(() => {
    if (darkMode) {
      document.documentElement.classList.add('dark')
      localStorage.setItem('theme', 'dark')
    } else {
      document.documentElement.classList.remove('dark')
      localStorage.setItem('theme', 'light')
    }
  }, [darkMode])

  return (
    <div className="min-h-screen bg-neutral-100 dark:bg-neutral-950 transition-colors duration-300 relative">
      <div className="absolute inset-0 isolate">
        <div className="grid-background-one absolute inset-0 opacity-30 dark:hidden"></div>
        <div className="grid-background-two absolute inset-0 dark:hidden"></div>
      </div>

      <button
        onClick={toggleDarkMode}
        className="cursor-pointer fixed top-3 lg:top-4 right-3 lg:right-4 w-9 h-9 lg:w-10 lg:h-10 flex items-center justify-center rounded-full bg-amber-500 text-neutral-950 shadow-lg hover:bg-amber-600 transition-colors z-10"
      >
        <i
          className={`bx bx-${darkMode ? 'sun' : 'moon'} text-lg lg:text-xl`}
        ></i>
      </button>

      <Hero darkMode={darkMode} />
    </div>
  )
}
